<template>
    <div id="lessors">
        <div id="search">
                <el-select v-model="value" placeholder="状态">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="toSearch()">搜索</el-button>
        </div>
        <el-table :data="lessors" style="width: 100%">
            <el-table-column prop="account" label="用户账户" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-button
                        type="danger"
                        v-if="scope.row.state == '2'"
                        @click="unFreeze(scope.row._id)"
                        >解冻</el-button
                    >
                    <el-button
                        type="success"
                        v-if="scope.row.state == '1'"
                        @click="isFreeze(scope.row._id)"
                        >冻结</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column prop="credits" label="信用值"> </el-table-column>
        </el-table>
        <div id="page" style="margin-top: 100px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currentPage - '0'"
                :page-sizes="[1, 3, 5, 7, 11]"
                :page-size="dataPage.pageSize"
                layout="total, sizes, prev, pager, next,jumper"
                :total="dataPage.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("adminLessors");
export default {
    mounted() {
        this.getLessors();
    },
    data() {
        return {
            options: [
                {
                    value: "1",
                    label: "正常使用",
                },
                {
                    value: "2",
                    label: "冻结",
                },
            ],
               value: "",
               input: "",
        };
    },
    methods: {
        ...mapMutations(["setPageData", "setCurrentPage", "setPageSize"]),
        ...mapActions(["getLessors"]),

        handleSizeChange(val) {
            this.setPageSize(val);
            this.getLessors(this.dataPage);
        },
        handleCurrentChange(val) {
            this.setCurrentPage(val);
            this.getLessors(this.dataPage);
        },
        isFreeze(id) {
            this.dataPage.freezeState = "2";
            this.dataPage._id=id;
            this.getLessors(this.dataPage);
        },
        unFreeze(id) {
            this.dataPage.freezeState = "1";
            this.dataPage._id=id;
            this.getLessors(this.dataPage);
        },
        toSearch(){
            this.dataPage.input=this.input;
            this.dataPage.value=this.value;
            this.getLessors(this.dataPage);
        }
    },
    computed: {
        ...mapState(["lessors", "dataPage"]),
    },
    watch: {
        "dataPage.pageSize": {
            handler(newName, oldName) {
                this.getLessors(this.dataPage);
            },
        },
        "dataPage.currentPage": {
            handler(newName, oldName) {
                this.getLessors(this.dataPage);
            },
        },
    },
};
</script>

<style lang='scss' scope>
#lessors{
    #search{
        .el-input{      
            width: 150px;
          input{
            border-right: none;
            border-radius: 0;
            width: 150px;
          }
        }
        .el-button{ 
                border-left: none;
                 border-radius: 0;
        }
    }
    .el-table{
        margin: 50px auto;

    }
}
</style>